<div class="modal-header">
    <h4 class="modal-title">
        <span >{{'FilesRename' | localize}}</span>
    </h4>
    <span class="pull-right">
        <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                [disabled]="saving">
            <i aria-hidden="true" class="bi bi-x"></i>
        </button>
    </span>
</div>
<div class="modal-body" >
    <div class="form-group form-md-line-input form-md-floating-label no-hint margin-top-10">
        <label>{{'FileName' | localize}}</label>
        <input type="text" name="fileName" class="form-control edited" [ngClass]="{'edited':data.fileName}" 
          [(ngModel)]="data.fileName" maxlength="256">
    </div>
    <div *ngIf="showAlt" class="form-group form-md-line-input form-md-floating-label no-hint margin-top-10">
        <label>Alternate Text</label>
        <input type="text" name="title" class="form-control edited" [ngClass]="{'edited':data.title}" 
          [(ngModel)]="data.title"  maxlength="256">
    </div>
    <div class="form-group form-md-line-input form-md-floating-label no-hint">
        <label>{{"Description" | localize}}</label>
        <textarea class="form-control" [ngClass]="{'edited':data.tags}" rows="4" [(ngModel)]="data.tags" 
          name="tags" maxlength="512"></textarea>
    </div>
</div>
<div class="modal-footer">
    <button [disabled]="saving" type="button" class="btn btn-light-primary font-weight-bold"
            (click)="close()">
        {{"Cancel" | localize}}
    </button>
    <button type="button" class="btn btn-primary font-weight-bold"
            [disabled]="saving" [buttonBusy]="saving"
            [busyText]="l('SavingWithThreeDot')" (click)="save()" >
        <i class="fa fa-save"></i> <span>{{"Save" | localize}}</span>
    </button>
</div>
